<template>
	<div class="pinpaisousuo">
		<!--上级-->
		<div class="fensiqian">
			<div class="darensou">
				<div class="darensou1">
					<input type="search" value="" placeholder="请输入商品名称" />
					<button style="cursor: pointer;">
						<i class="el-icon-search"></i>
					</button>
				</div>
			</div>
			<div class="pinpai">
				<ul>
					<li v-for="(item,index) in pinpaishuju">{{item.name}}</li>
				</ul>
			</div>
		</div>
		
		<div class="fangpai">
			<div class="silingsi">
				<img src="../../../../assets/img/404.png" />
				<span>升级至高级版即可查看热门商品</span>
			</div>
			<div class="lijishengji" @click="open">立即升级</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				pinpaishuju:[
					{name:"全部"},
					{name:"3C数码"},
					{name:"家用电器"},
					{name:"服饰鞋包"},
					{name:"美妆个护"},
					{name:"母婴用品"},
					{name:"居家日用"},
					{name:"时尚饰品"},
					{name:"图书音像"},
					{name:"玩具乐器"},
					{name:"家纺家装"},
					{name:"汽车用品"},
					{name:"食品饮料"},
					{name:"宠物用品"},
				]
			}
		},
		activated() {
			
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			$(".pinpai ul li").click(function(){
				$(this).css({
					"border-radius":"0.2rem",
					"background-color": "#0091FF",
					"color": "#fff",
					"font-size": "0.41rem",
				})
				$(this).siblings().css({
					"border-radius":"0" ,
					"background-color": "#fff",
					"color": "#999",
					"font-size": "0.4rem",
				})
			})
		},
		methods:{
			open() {
				this.$confirm('此功能仅限高级版本使用，请升级后再试', '升级提示', {
				  confirmButtonText: '立即升级',
				  cancelButtonText: '我在想想',
				  type: 'warning',
				}).then(() => {
				 //  this.$message({
					// type: 'success',
					// message: '立即升级!'
				 //  });
				 this.$router.push('/home/'+this.$store.state.luyoushu+'/xufeizhongxin')
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '好好在想想哟！'
				  });          
				});
			 }
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.pinpaisousuo{
		.fensiqian{
			background-color: #fff;
			border-radius:0.1rem ;
			padding: 1rem 0.8rem;
			.darensou{
				
				.darensou1{
					float: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1px solid #D4D4D4;
					
					input{
						border: none;
						outline: none;
						width: 7rem;
						height: 1.1rem;
						letter-spacing: 0.02rem;
						padding-left:0.4rem ;
						font-size: 0.4rem;
					}
					input::placeholder{
						color: #D3D3D3;
						font-size: 0.35rem;
					}
					button{
						border: none;
						outline: none;
						padding: 0.3rem;
						background-color: #fff;
						font-size: 0.4rem;
					}
				}
				.darensou2{
					float: left;
					margin-left:1rem ;
					color: #333333;
					font-size: 0.5rem;
					letter-spacing: 0.05rem;
					margin-top:0.2rem ;
					
					span{
						color: #0091FF;
					}
				}
			}
			.darensou::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.pinpai{
				margin: 0.6rem 0;
				margin-bottom:0 ;
				
				ul{
					list-style: none;
					
					li{
						transition: all 0.3s ease;
						cursor: pointer;
						color: #999999;
						font-size: 0.4rem;
						float: left;
						padding: 0.1rem 0.3rem;
						margin-bottom:0.6rem ;
						margin-right:0.5rem ;
					}
					// li:not(:first-child){
					// 	margin-left:0.5rem ;
					// }
					li:nth-of-type(1){
						border-radius:0.2rem ;
						background-color: #0091FF;
						color: #fff;
						font-size: 0.41rem;
					}
				}
				ul::after{
					content: "";
					display: block;
					clear: both;
				}
			}
		}
		
		.fangpai{
			margin-top:1rem ;
			background-color: #fff;
			padding: 4rem 0;
			text-align: center;
			
			.silingsi{
				text-align: center;
				
				img{
					height: 4rem;
				}
				span{
					display: block;
					color: #999999;
					font-size: 0.4rem;
					padding: 0.6rem 0;
					box-sizing: border-box;
				}
			}
			.lijishengji{
				cursor: pointer;
				// width:2.5rem;
				border-radius:0.1rem ;
				background-color: #0091FF;
				color: #fff;
				font-size: 0.4rem;
				text-align: center;
				padding: 0.2rem 0.4rem;
				margin: auto;
				display: inline;
			}
		}
	}
</style>
